<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>科研实验室后台管理系统</title>
    <meta name="keywords" content="科研实验室">
    <meta name="description" content="科研实验室管理系统">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="fontawesome-free-5.11.2/css/all.min.css" media="all">
    <link rel="stylesheet" href="css/common.css">
<style>
[data-field="file"] .table-tdTitle-info a {color:#666!important;}
[data-field="file"] .table-tdTitle-info i {width:20px;}
[data-field="operating"] .layui-table-cell {overflow: initial!important;}
[data-field="operating"] .fc-dropdown a {color:#666;}
.layui-table-box {overflow: inherit;}
.layui-table-body {overflow: inherit;}
.table-crumb {font-size:12px;color:#adb5bd;}
.table-crumb cite {color:#676a6c;font-style: normal;}
.table-crumb a {position: relative;}
.table-crumb a:not(:first-child):after {content:"\e602";font-family:layui-icon;color:#ced4da;padding:0 3px;}
/*
 *	plupload 上传文件中显示的弹层
 */
.uploader-list-wrapper {font-size: 12px;position: fixed!important;right:10px;bottom:0;background: #fff;width:600px;height:400px;box-shadow: 0 0 15px rgba(0,0,0,.22);border-radius:6px 6px 0 0;overflow:hidden;display:none;z-index:600;-webkit-transition: height .3s ease;transition: height .3s ease;}
.uploader-list-wrapper.show {display:block;}
.uploader-list-wrapper.min {height:43px;}
.uploader-list-wrapper.min a[data-type="min"] {border:2px solid #fff;border-radius:3px;}
.uploader-list-title {height:44px;padding:0 15px;border-bottom:1px solid #e8e8e8;font-size:14px;background: #727cf5;color:#fff;}
.uploader-list-title h6 {float:left;font-weight: normal;line-height:44px;}
.uploader-list-title>div {float:right;}
.uploader-list-title>div a {margin-left:15px;color:#fff;display: inline-block;width:14px;height:14px;margin-top:16px;}
.uploader-list-title>div a[data-type="min"] {border-bottom:2px solid #fff;}
.uploader-list-title>div a[data-type="close"]:after {content:"\1006";font-family:'layui-icon';font-size:16px;}
.uploader-list-header {height:34px;line-height: 34px;border-bottom:1px solid #ececec;}
.uploader-list-wrapper .file-name {float:left;width:45%;white-space: nowrap;text-overflow: ellipsis;padding-left:35px;}
.uploader-list-wrapper .file-size {float:left;width:20%;text-indent:10px;}
.uploader-list-wrapper .file-status {float:left;width:10%;text-indent:10px;}
.uploader-list-wrapper .file-info {float:left;width:15%;text-indent:10px;text-align: center;}
.uploader-list-wrapper .file-status .file-ok {color:#0acf97;}
.uploader-list-wrapper .file-status .file-error {color:#ffbc00;}
.uploader-list-wrapper .file-remove {cursor: pointer;font-size:14px;}
.uploader-list {max-height:260px;overflow-y:auto;}
.uploader-list ul {height: 44px;line-height: 44px;border-bottom:1px solid #ececec;}
.uploader-list ul li {height:44px;overflow:hidden;}
.uploader-list>div {position: relative;}
.uploader-list>div .progress {position: absolute;top:0;left:0;width:0;height:100%;background:rgba(144,124,245,.15);}
.uploader-list-wrapper .bottom {text-align: center;margin-top:20px;}
.uploader-list .file-icon {display:inline-block;width:21px;height:24px;background:url(../images/file-icon.png) no-repeat 0 -34px;position:absolute;top:10px;left:10px;}
.uploader-list .file-icon.csv {background-position:0 0;}
.uploader-list .file-icon.zip {background-position:0 -238px;}
.uploader-list .file-icon.word {background-position:0 -102px;}
.uploader-list .file-icon.excel {background-position:0 -170px;}
.uploader-list .file-icon.pdf {background-position:0 -136px;}
.uploader-list .file-icon.png {background-position:0 -204px;}
/*访问用户*/
.access-user-list a {margin-bottom:5px;}
#access-user .layui-tree-iconClick .layui-icon-file:before {content:'\e612';}
</style>    
</head>

<body id="plupload-drag-area" style="background:#2e3d4d;">


<!-- layui card begin -->
<div class="layui-card" style="margin:100px;">
	<div class="layui-card-header">
		<h3>文档中心</h3>
	</div>
	<div class="layui-card-body">

		<!-- 文件管理 begin -->
		<!-- 筛选 begin -->
			<div class="layui-form layui-form-filter mb10">
			<div class="flex justify-content-sb">
				<div>
					<div class="fc-dropdown mr5" type="hover">
						<a href="javascript:void(0)" id="plupload-browse-button" class="layui-btn layui-btn-sm"><i class="layui-icon layui-icon-upload"></i>上传</a>
						<div class="fc-dropdown-menu" style="display:none;">
							<ul class="fc-dropdown-menu-list tac">
								<li><a href="javascript:void(0)" id="plupload-browse-button-file">上传文件</a></li>
								<li><a href="javascript:void(0)">上传文件夹</a></li>
							</ul>
						</div>
					</div>
					<a href="javascript:;" class="btn-new-folder layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-add-1"></i> 新建文件夹</a>
					<div class="layui-btn-group ml5 layui-hide file-table-top-operation">
						<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" data-type="copy">复制到</a>
						<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" data-type="move">移动到</a>
						<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" data-type="edit">重命名</a>
						<a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-primary" data-type="del">删除</a>
					</div>
				</div>
				<div>
					<div class="layui-inline pos-r">
						<input type="text" class="layui-input pr30" placeholder="搜索文件或文件夹名称" style="height:30px;">
						<a href="javascript:;" class="pos-a file-table-list-search" style="top:3px;right:10px;"><i class="layui-icon layui-icon-search"></i></a>
					</div>
				</div>
			</div>
		</div>
		<!-- 筛选 end -->
		<div class="table-crumb"><cite>全部文件</cite></div>
		<div class="table-item file-table-box">
			<table id="file-table" lay-filter="file-table-filter"></table>
		</div>
		<!-- 文件管理 end -->
	</div>
</div>
<!-- layui card end -->


<!-- 新建文件夹 弹层-->
<div id="popup-new-folder" style="padding:20px 20px 0 0;display: none;">
	<form action="" class="layui-form" lay-filter="new-folder-filter">
		<div class="layui-form-item">
			<label class="layui-form-label">文件夹名</label>
			<div class="layui-input-block">
				<input type="text" name="folder_name" class="layui-input" lay-verify="required">
			</div>
		</div>		
		<div class="layui-form-item">
			<label class="layui-form-label">描述说明</label>
			<div class="layui-input-block">
				<textarea name="folder_desc" id="" class="layui-textarea" placeholder="请输入内容" onkeyUp="textLimitCheck(this, 100);" style="resize:none;"></textarea>
				<div class="f12 mt5 gray9">还可以输入<span id="textareaInput" class="red p05">100</span>字</div>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">访问用户</label>
			<div class="layui-input-block">
				<div class="layui-form-mid access-user-list"><a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-normal add-access-user"><i class="layui-icon layui-icon-add-1"></i> 添加用户</a></div>
			</div>
		</div>		
	</form>
</div>

<!-- 添加用户弹层 -->
<div id="access-user" style="display: none;">
	<div id="access-user-tree"></div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="js/om_common.js"></script>

<!-- 以下是演示内容数据，用于输出表格数据 -->
<script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script>
// mock begin
function getUrlParam(k,options) {
    var regExp = new RegExp('([?]|&)' + k + '=([^&]*)(&|$)');
    var result = options.url.match(regExp);
    if (result) {
        return decodeURIComponent(result[2]);
    } else {
        return null;
    }
}
Mock.mock(RegExp('http://mock/data.*'),function(options){
    var pageSize = getUrlParam('pageSize',options),
        page = getUrlParam('page',options),
        _data = [],
        count = 50, //总数
        len = (count - pageSize * (page - 1)) < pageSize ? (count - pageSize * (page - 1)) : pageSize;
    for(var i=0;i<len;i++){
        _data.push(
            Mock.mock({
                "id": 'SLLC202001170'+(page - 1) * pageSize + (i + 1),
                "time": "@datetime",
                "cname":"@cname",
                "name": "@last()",
                "file":{
                	"type|1":["file","folder"],
                	"name":"@domain()"
                },
                "num|1-100": 100, 
                "desc":"@ctitle",
                "user":[{
							title: '武燕',
							id:31,
						},{
							title: '蔡涛',
							id:32
						},{
							title: '姚秀兰',
							id:33
						}],           
            })            
        )
    }
    return {
        "code":0,
        "count":count,
        "data":_data,
        'msg':'请求数据成功',
    }
});
// mock end
</script>

<script src="js/file/index.js"></script>
<script src="js/plupload/plupload.full.min.js"></script><!-- 上传文件 插件 -->
<script src="js/file/upload-file.js"></script>

</body>
</html>
